<template>
	<view :style="themeColor">
		<view class="page">
			<view class="flex benben-position-layout flex flex-wrap align-center bondPay_flex_0"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between flex-sub bondPay_fd0_0'>
					<view class='flex flex-wrap align-center bondPay_fd0_0_c0' @tap.stop="handleJumpDiy"
						data-type="back" data-url="1">
						<text class='fu-iconfont2  bondPay_fd0_0_c0_c0'>&#xe794;</text>
					</view>
					<text class='bondPay_fd0_0_c1'>保证金充值</text>
					<view class='flex flex-wrap align-center bondPay_fd0_0_c0'>
					</view>
				</view>

			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<!---flex布局flex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout bondPay_flex_1">
				<view class='flex flex-wrap align-center bondPay_fd1_0'>
					<text class='bondPay_fd1_0_c0'>￥</text>
					<benben-input class='bondPay_fd1_0_c1' type="digit" :placeholder="`请输入保证金金额`" confirm-type="done"
						:maxlength="6" :adjust-position='true' placeholder-style="color:#999;font-size:34rpx"
						v-model="deposit" />
				</view>
				<view class='flex flex-wrap align-center bondPay_fd1_1'>
					<text>{{depositInformation.deposit_content}}</text>
				</view>
			</view>

			<!---flex布局flex布局结束-->
			<!---flex布局flex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout bondPay_flex_2">
				<text class='bondPay_fd2_0'>选择支付方式</text>
				<benben-select-diy ref="showSelectPopup1686915247291"
					class-name='flex flex-direction flex-wrap align-stretch flex bondPay_fd2_1' :items.sync="pay_type"
					v-model="pay_id" default-type="value" default-label="name" :allow-cancel='true' type="radio"
					:disabled='false'>
					<template v-for='(item,key0) in pay_type'>
						<view v-if="item.isSelected" class='flex align-center flex bondPay_fd2_1_c0' :key="key0"
							@tap="$refs.showSelectPopup1686915247291.tapHandle(key0)">
							<image class='bondPay_fd2_1_c0_c0' mode="aspectFit" :src='item.image'></image>
							<text class='bondPay_fd2_1_c0_c1'>{{item.name}}</text>
							<image class='bondPay_fd2_1_c0_c2' mode="aspectFit" :src='STATIC_URL+"100.png"'></image>
						</view>
						<view v-else class='flex align-center flex bondPay_fd2_1_c0' :key="key0"
							@tap="$refs.showSelectPopup1686915247291.tapHandle(key0)">
							<image class='bondPay_fd2_1_c0_c0' mode="aspectFit" :src='item.image'></image>
							<text class='bondPay_fd2_1_c0_c1'>{{item.name}}</text>
							<image class='bondPay_fd2_1_c0_c2' mode="aspectFit" :src='STATIC_URL+"94.png"'></image>
						</view>
					</template></benben-select-diy>
			</view>

			<!---flex布局flex布局结束-->
			<!-- 	<view class="flex flex-wrap align-start justify-center benben-position-layout bondPay_flex_3">
				<button class='bondPay_fd3_0' @tap.stop="getOrderDingFuncFunc()">确认充值</button>
			</view>
			<view :style="{height: '100rpx'}"></view> -->
			<view
				class="flex flex-wrap align-start justify-center benben-position-layout flex immediateWithdrawal_flex_7">
				<view class='flex flex-direction flex-wrap align-stretch flex-sub'>
					<view class='flex flex-wrap align-center justify-center'>
						<benben-flex-switch-new class-name='flex flex immediateWithdrawal_fd7_0_c0_c0' v-model="check"
							:disabled='false' :auto='true'>
							<template v-slot:checked>
								<view class='flex flex position-relative align-center'>
									<image class='immediateWithdrawal_checkfd7_0_c0_c0_c0_c0' mode="aspectFit"
										:src='STATIC_URL+"100.png"'></image>
								</view>
							</template>
							<template v-slot:unchecked>
								<view class='flex flex position-relative justify-end align-center'>
									<image class='immediateWithdrawal_checkfd7_0_c0_c0_c0_c0' mode="aspectFit"
										:src='STATIC_URL+"49.png"'></image>
								</view>
							</template>
						</benben-flex-switch-new>
						<text class='immediateWithdrawal_fd7_0_c0_c1'>已阅读并同意</text>
						<text class='immediateWithdrawal_fd7_0_c0_c2' @tap.stop="handleJumpDiy" data-type="navigateTo"
							:data-url="`/pages/wode/bondPayAgreement/bondPayAgreement`">《保证金充值协议》</text>
					</view>
					<view class='flex flex-wrap align-center justify-center immediateWithdrawal_fd7_0_c1'>
						<view
							class='flex flex-wrap align-center self-center justify-center immediateWithdrawal_fd7_0_c1_c0'
							@tap.stop="getOrderDingFuncFunc()">
							<text class='immediateWithdrawal_fd7_0_c1_c0_c0'>确认充值</text>
						</view>
					</view>
				</view>
			</view>
			<view :style="{height: '200rpx'}"></view>
			<benben-popup v-model="popupShow1693294447158" :mask="true" :mask-close-able="true" mode='center'>
				<!---设置支付密码弹窗flex布局开始-->
				<view class="flex flex-direction flex-wrap align-center bondPay_flex_4"
					@tap.stop="popupShow1650940432200=true">
					<text class='bondPay_fd4_0'>提示</text>
					<text class='bondPay_fd4_1'>您还没设置密码，请先设置密码</text>
					<view class='flex flex-wrap align-center bondPay_fd4_2'>
						<button class='bondPay_fd4_2_c0' @tap.stop="popupShow1693294447158=false">取消</button>
						<button class='bondPay_fd4_2_c1' @tap.stop="hideWindowFunc()">确定</button>
					</view>
				</view>

				<!---设置支付密码弹窗flex布局结束-->

			</benben-popup>
			<benben-popup v-model="popupShow1693294150372" :mask="true" :mask-close-able="false" mode='center'>
				<!---输入密码弹窗flex布局开始-->
				<view class="flex benben-flex-layout flex-wrap align-center">
					<view class='flex flex-direction flex-wrap align-center bondPay_fd5_0'>
						<text class='bondPay_fd5_0_c0'>请输入密码</text>
						<benben-digital-password :box-num='6' mode='password'
							class-name="flex flex align-center justify-center bondPay_fd5_0_c1" v-model="pay_password"
							:init-open.sync="xianshi">
							<template #default="{ content, active, index }">
								<view :key="index" v-if="active"
									class="flex align-center justify-center active-digital-password bondPay_flex_password_active_fd5_0_c1">
									{{ content }}
								</view>
								<view :key="index" v-else
									class="flex align-center justify-center bondPay_flex_password_noActive_fd5_0_c1">
									{{ content }}
								</view>
							</template>
						</benben-digital-password>
						<view class='flex align-stretch bondPay_fd5_0_c2'>
							<button class='bondPay_fd5_0_c2_c0' @tap.stop="emptyFunc()">取消</button>
							<button class='bondPay_fd5_0_c2_c1' @tap.stop="balancepayFunc()">确定</button>
						</view>
					</view>
				</view>

				<!---输入密码弹窗flex布局结束-->

			</benben-popup>


		</view>
	</view>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'

	export default {
		components: {},


		data() {
			return {
				"popupShow1693294150372": false,
				"popupShow1693294447158": false,
				"check": false,
				"pay_type": [],
				"pay_id": "",
				"payData": {
					"falg": ""
				},
				"pay_password": "",
				"xianshi": true,
				"payInfo": "",
				"depositInformation": {
					"deposit_money": "",
					"deposit_content": ""
				},
				"deposit": "",
				"depositMoney": {
					"order_no": "",
					"amount": ""
				}
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},

		},
		watch: {},
		onLoad(options) {
			this.getPayTypeFunc()
			this.getDepositInformationFunc()
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			//提交支付
			async postPayFunc() {
				if (this.pay_id == '3') {
					//请求方法
					//数据验证

					let datapayData = await this.$api.dbGet(global.apiUrls.post64ed572598eeb, {

					});
					if (!datapayData) return
					if (datapayData.data.code != 1) {
						this.$message.info(datapayData.data.msg);
						return
					}
					let infopayData = datapayData.data;
					this.payData = infopayData.data

					if (this.payData.falg == 0) {
						this.popupShow1693294447158 = true;
					} else {
						this.popupShow1693294150372 = true;
					}
				} else if (this.pay_id == '1') {
					let data62e335233b477 = await this.$api.dbPost(global.apiUrls.post62e335233b477, {
						order_sn: this.depositMoney.order_no,
						// #ifdef APP-PLUS
						wxpaytype: 'AppPay',
						// #endif
						// #ifdef MP
						wxpaytype: 'MiniPay',
						// #endif
						order_config_id: '15'
					});
					if (!data62e335233b477) return
					if (data62e335233b477.data.code != 1) {
						this.$message.info(data62e335233b477.data.msg);
						return
					}

					let info62e335233b477 = data62e335233b477.data;
					this.payInfo = info62e335233b477.data
					await this.requestPaymentWx(this.payInfo)
					this.$urouter.redirectTo(`/pages/login/paySuccess/paySuccess`);
				} else if (this.pay_id == '2') {
					let data62e342a23919c = await this.$api.dbPost(global.apiUrls.post62e342a23919c, {
						order_config_id: '15',
						order_sn: this.depositMoney.order_no
					});
					if (!data62e342a23919c) return
					if (data62e342a23919c.data.code != 1) {
						this.$message.info(data62e342a23919c.data.msg);
						return
					}
					let info62e342a23919c = data62e342a23919c.data;
					this.payInfo = info62e342a23919c.data
					await this.requestPaymentAli(this.payInfo)
					this.$urouter.redirectTo(`/pages/login/paySuccess/paySuccess`);
				}
			},
			//余额支付
			async balancepayFunc() {
				if (!validate(this.pay_password, 'require')) {
					this.$message.info('请输入支付密码');
					return false;
				}
				if (!validate(this.pay_password, 'length', '6')) {
					this.$message.info('请输入六位数支付密码');
					return false;
				}
				if (this.$util.antiShakeThrottle()) return
				//请求方法
				//数据验证

				let data5f64a4d364b44 = await this.$api.post(global.apiUrls.post5f64a4d364b44, {
					pay_password: this.pay_password
				});

				if (data5f64a4d364b44.data.code != 1) {
					this.$message.info(data5f64a4d364b44.data.msg);
					return
				}

				//请求方法
				//数据验证
				let data63aaabee10832 = await this.$api.post(global.apiUrls.post63aaabee10832, {
					order_sn: this.depositMoney.order_no,
					order_config_id: '21'
				});

				if (data63aaabee10832.data.code != 1) {
					this.$message.info(data63aaabee10832.data.msg);
					return
				}
				this.popupShow1693294150372 = false;
				this.$urouter.redirectTo(`/pages/login/paySuccess/paySuccess`);
			},
			//隐藏弹窗跳转设置密码
			hideWindowFunc() {
				this.popupShow1693294447158 = false;
				this.$urouter.navigateTo(`/pages/wode/payment/payment`);
			},
			//清空密码
			emptyFunc() {
				this.pay_password = '';
				this.popupShow1693294150372 = false;
			},
			//根据订单类型获取支付方式
			async getPayTypeFunc() {
				//请求方法
				//数据验证

				let datapay_type = await this.$api.get(global.apiUrls.post6539e3dfc1fd0, {
					type: '15'
				});

				if (datapay_type.data.code != 1) {
					this.$message.info(datapay_type.data.msg);
					return
				}
				let infopay_type = datapay_type.data;
				this.pay_type = infopay_type.data

			},
			//获取保证金配置信息
			async getDepositInformationFunc() {
				//请求方法
				//数据验证

				let datadepositInformation = await this.$api.get(global.apiUrls.post660240d0dfba3, {

				});

				if (datadepositInformation.data.code != 1) {
					this.$message.info(datadepositInformation.data.msg);
					return
				}
				let infodepositInformation = datadepositInformation.data;
				this.depositInformation = infodepositInformation.data

			},
			//获取定金订单
			async getOrderDingFuncFunc() {
				if (this.deposit < 0) {
					this.deposit = '';
					this.$message.info('保证金金额不能输入负数');
					return
				} else if (this.deposit < +this.depositInformation.deposit_money) {
					this.$message.info(`保证金金额不能小于${this.depositInformation.deposit_money}元`);
					this.deposit = this.depositInformation.deposit_money
					return
				}
				if (!validate(this.pay_id, 'require')) {
					this.$message.info('请选择支付方式');
					return false;
				}
				if (this.check === false) {
					this.$message.info('请阅读并勾选《保证金充值协议》');
					return false;
				}
				if (this.$util.antiShakeThrottle()) return
				//请求方法
				//数据验证

				let datadepositMoney = await this.$api.post(global.apiUrls.post63dcd51a800af, {
					deposit_money: this.deposit
				});

				if (datadepositMoney.data.code != 1) {
					this.$message.info(datadepositMoney.data.msg);
					return
				}
				let infodepositMoney = datadepositMoney.data;
				this.depositMoney = infodepositMoney.data

				this.postPayFunc()
			}
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: rgba(248, 248, 248, 1);
		background-size: 100% auto;
	}

	.bondPay_flex_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.bondPay_fd0_0_c1 {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
	}

	.bondPay_fd0_0_c0_c0 {
		font-size: 32rpx;
		color: #333;
	}

	.bondPay_fd0_0_c0 {
		width: 120rpx;
		height: 88rpx;
	}

	.bondPay_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
		height: 88rpx;
	}

	.bondPay_flex_1 {
		background: #fff;
		background-size: 100% auto !important;
		padding: 60rpx 32rpx 60rpx 32rpx;
	}

	.bondPay_fd1_1 {
		margin: 24rpx 0rpx 0rpx 0rpx;
		font-weight: 500;
	}

	.bondPay_fd1_0_c1 {
		margin: 10rpx 0rpx 0rpx 0rpx;
	}

	.bondPay_fd1_0_c0 {
		margin: 0rpx 16rpx 0rpx 0rpx;
		font-size: 36rpx;
	}

	.bondPay_fd1_0 {
		border-bottom: 1px solid #eee;
		padding: 0rpx 0rpx 16rpx 0rpx;
	}

	.bondPay_flex_2 {
		background: #fff;
		background-size: 100% auto !important;
		margin: 20rpx 0rpx 0rpx 0rpx;
	}

	.bondPay_fd2_1_c0_c2 {
		width: 36rpx;
		height: 36rpx;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		margin: 0rpx 0rpx 0rpx auto;
	}

	.bondPay_fd2_1_c0_c1 {
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.bondPay_fd2_1_c0_c0 {
		width: 44rpx;
		height: 44rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin: 0rpx 24rpx 0rpx 0rpx;
	}

	.bondPay_fd2_1_c0 {
		border-bottom: 1px solid #eee;
		padding: 32rpx 0rpx 32rpx 0rpx;
	}

	::v-deep .bondPay_fd2_1 {
		margin: 0rpx 32rpx 0rpx 32rpx;
	}

	.bondPay_fd2_0 {
		margin: 40rpx 32rpx 20rpx 32rpx;
		font-size: 32rpx;
		font-weight: 700;
		color: #333;
	}

	.bondPay_flex_3 {
		// background: #fff;
		width: 750rpx;
		height: 100rpx;
		overflow: hidden;
		z-index: 10;
		bottom: calc(0rpx + var(--window-bottom));
		background-size: 100% auto !important;
		box-shadow: 0rpx 1rpx 0rpx rgba(238, 238, 238, 1);
	}

	.bondPay_fd3_0 {
		background: rgba(48, 144, 255, 1);
		border-radius: 39rpx 39rpx 39rpx 39rpx;
		font-size: 28rpx;
		color: #fff;
		width: 686rpx;
		height: 72rpx;
		line-height: 72rpx;
		font-weight: 400;
		margin: 0rpx 32rpx 0rpx auto;
	}

	.bondPay_flex_4 {
		background: #fff;
		width: 540rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.bondPay_fd4_2_c1 {
		border-top: 1px solid #eee;
		border-left: 1px solid #eee;
		background: #fff;
		line-height: 110rpx;
		border-radius: 0rpx 0rpx 16rpx 0rpx;
		font-size: 32rpx;
		color: rgba(48, 144, 255, 1);
		width: 265rpx;
	}

	.bondPay_fd4_2_c0 {
		border-top: 1px solid #eee;
		background: #fff;
		line-height: 110rpx;
		border-radius: 0rpx 0rpx 0rpx 16rpx;
		font-size: 32rpx;
		color: rgba(153, 153, 153, 1);
		padding: 0rpx 103rpx 0rpx 103rpx;
	}

	.bondPay_fd4_2 {
		margin: 37rpx 0rpx 0rpx 0rpx;
	}

	.bondPay_fd4_1 {
		line-height: 44rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}

	.bondPay_fd4_0 {
		font-size: 36rpx;
		font-weight: 800;
		line-height: 44rpx;
		color: #333333;
		margin: 40rpx 0rpx 40rpx 0rpx;
	}

	.bondPay_fd5_0_c2_c1 {
		background: #fff;
		border-radius: 0rpx 0rpx 16rpx 0rpx;
		font-size: 33rpx;
		color: rgba(48, 144, 255, 1);
		width: 269rpx;
		font-weight: 500;
		line-height: 94rpx;
	}

	.bondPay_fd5_0_c2_c0 {
		border-right: 1px solid #eee;
		background: #fff;
		border-radius: 0rpx 0rpx 0rpx 16rpx;
		font-size: 32rpx;
		color: var(--benbenFontColor2);
		line-height: 94rpx;
		width: 269rpx;
		font-weight: 400;
	}

	.bondPay_fd5_0_c2 {
		border-top: 1px solid #eee;
	}

	.bondPay_flex_password_noActive_fd5_0_c1 {
		border: 1px solid #ccc;
		width: 68rpx;
		height: 68rpx;
	}

	.bondPay_flex_password_active_fd5_0_c1 {
		border: 1px solid #409EFF;
		width: 68rpx;
		height: 68rpx;
	}

	::v-deep .bondPay_fd5_0_c1 {
		margin: 32rpx 0rpx 32rpx 0rpx;
	}

	.bondPay_fd5_0_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		margin: 0rpx 0rpx 32rpx 0rpx;
	}

	.bondPay_fd5_0 {
		background: #fff;
		width: 540rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		background-size: 100% auto !important;
		padding: 40rpx 0rpx 0rpx 0rpx;
	}

	//
	.immediateWithdrawal_flex_7 {
		width: 750rpx;
		height: 200rpx;
		overflow: hidden;
		z-index: 10;
		bottom: calc(0rpx + var(--window-bottom));
	}

	::v-deep .immediateWithdrawal_fd7_0_c0_c0 {
		margin: 0rpx 8rpx 0rpx 0rpx;
	}

	.immediateWithdrawal_checkfd7_0_c0_c0_c0_c0 {
		width: 32rpx;
		height: 32rpx;
	}

	.immediateWithdrawal_fd7_0_c0_c1 {
		color: rgba(102, 102, 102, 1);
		font-size: 24rpx;
		font-weight: 400;
		line-height: 33rpx;
	}

	.immediateWithdrawal_fd7_0_c0_c2 {
		color: #3090FF;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 33rpx;
	}

	.immediateWithdrawal_fd7_0_c1_c0_c0 {
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: 500;
	}

	.immediateWithdrawal_fd7_0_c1_c0 {
		background: #2479FF;
		border-radius: 100rpx 100rpx 100rpx 100rpx;
		width: 686rpx;
		height: 88rpx;
		line-height: 88rpx;
	}

	.immediateWithdrawal_fd7_0_c1 {
		margin: 40rpx 0rpx 0rpx 0rpx;
	}
</style>